<template>
  <div style="margin: 20px;">
    <el-card>
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="6">
            <div style="font-size: large">
              <span style="font-size:24px;color:#007aff;margin-left: 5px;"> 高价格机房占比分析</span>
            </div>
          </el-col>
          <el-col :span="18">
            <div style="text-align: right">
              <span style="font-size:14px;margin-top: 25px;"> 更新时间:2024-11-16 12:45:12</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="" prop="staDate">
          <el-date-picker clearable v-model="queryParams.staDate" type="month" value-format="yyyy-MM" placeholder="请选择账期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="" prop="pregId">
          <el-select v-model="queryParams.pregId" clearable placeholder="-选择地市-">
            <el-option label="全省" value=""></el-option>
            <el-option v-for="item in this.pregList" :key="item.regId" :label="item.regName"
              :value="item.regId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button type="primary" size="mini" @click="handleExport"
            v-hasPermi="['twr:highTower:export']">导出表格</el-button>
        </el-form-item>
      </el-form>

      <el-tabs v-model="activeName">
        <el-tab-pane label="全年趋势图" name="trendChartPane">
          <trend-chart ref="trendChart"/>
        </el-tab-pane>
        <el-tab-pane label="汇总统计" name="allCountPane">
          <el-table v-loading="loading" :data="allList">
            <el-table-column label="账期" align="center" prop="staDate" width="90px" />
            <el-table-column label="地市" align="center" prop="pregName" width="90px" />
            <el-table-column label="全量高价格机房数量" align="center" prop="highRoomCount" />
            <el-table-column label="新建高价格机房数量" align="center" prop="highRoomNewCount" />
            <el-table-column label="全量高价格机房占比" align="center" prop="highRoomRatio">
              <template slot-scope="scope">
                <span>{{ percentAge(scope.row.highTowerRatio) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="新建高价格机房占比" align="center" prop="highRoomNewRatio">
              <template slot-scope="scope">
                <span>{{ percentAge(scope.row.highTowerNewRatio) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="全量高价格机房占比同比" align="center" prop="highRoomRate">
              <template slot-scope="scope">
                <span>{{ percent(scope.row.highTowerRate) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="新建高价格机房占比同比" align="center" prop="highRoomNewRate">
              <template slot-scope="scope">
                <span>{{ percent(scope.row.highTowerNewRate) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="明细数据" name="detailDataPane">
          <el-table v-loading="loading" :data="highTowerList">
            <el-table-column label="账期" align="center" prop="staDate" width="90px" />
            <el-table-column label="地市名称" align="center" prop="pregName" width="90px" />
            <el-table-column label="区县名称" align="center" prop="regName" width="90px" />
            <el-table-column label="需求确认单号" align="center" prop="agreeBillCode" width="150px" />
            <el-table-column label="业务确认单号" align="center" prop="businessConfirmNumber" width="200px" />
            <el-table-column label="站址编码" align="center" prop="towerStationCode" width="160px" />
            <el-table-column label="站址名称" align="center" prop="towerStationName" width="300px" />
            <el-table-column label="服务开始时间" align="center" prop="activeTime" width="100px" />
            <el-table-column label="产品单元数1+2+3" align="center" prop="unitCount">
              <template slot-scope="scope">
                <span> {{ scope.row.unitCount ? scope.row.unitCount : '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="机房产品" align="center" prop="roomTypeName" />
            <el-table-column label="机房共享信息" align="center" prop="roomShareInfoName"  width="100px"/>
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getHighTower" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { listHighRoom, listHighRoomSummary,getAllYearTrend } from "@/api/expense/twr/highRoom";
import { preg } from '@/api/region/region'
import TrendChart from "@/views/expense/twr/highTower/TrendChart.vue";
// import LineChart from '@/views/dashboard/LineChart'
export default {
  name: "HighTower",
  components: {TrendChart},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中选项卡的 name
      activeName: "trendChartPane",
      // 总条数
      total: 0,
      // 铁塔-高价格机房占比分析表汇总
      allList: [],
      // 铁塔-高价格机房占比分析表格数据
      highTowerList: [],
      // 弹出层标题
      // 地市列表
      pregList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        staDate: null,
        pregId: '',
      },
      flowTrendList:[]
    };
  },
  created() {
    var today = new Date();
    var lastMonthDate = new Date(
      today.getFullYear(),
      today.getMonth(),
      today.getDate()
    
    );
    // 格式化日期为 YYYY-MM
    let month =
      lastMonthDate.getMonth() < 10
        ? "0" + (lastMonthDate.getMonth())
        : lastMonthDate.getMonth();
    var formattedDate = lastMonthDate.getFullYear() + "-" + month;
    this.queryParams.staDate = formattedDate;
    this.getPreg();
    this.getHighTowerSummary();
    this.getHighTower();
    this.getAllYearTrend();
  
  },
  methods: {
    /** 查询铁塔-高价格机房占比分析列表 */
    getHighTower() {
      this.loading = true;
      listHighRoom(this.queryParams).then(response => {
        this.highTowerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /**
     * 全量统计
     */
    getHighTowerSummary() {
      this.loading = true;
      listHighRoomSummary(this.queryParams).then(response => {
        this.allList = response.rows;
        this.loading = false;
      });
    },

       /**
     * 全量统计
     */
     getAllYearTrend() {
      getAllYearTrend(this.queryParams).then(response => {
        this.$refs.trendChart.initData(response.rows);
      });
    },


    // 获取地市
    getPreg() {
      preg(this.queryParams.pregId).then(response => {
        this.pregList = response.data
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        staDate: null,
        pregId: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getHighTowerSummary();
      this.getAllYearTrend();
      this.getHighTower();
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('twr/highTower/export', {
        ...this.queryParams
      }, `highTower_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
